Challenge: Fixing blog page styles

In this challenge we give you a basic blog page example that is partially styled. We need you to fix some problems with the existing CSS and add some styles to finish it off. Along the way we will test your knowledge of selectors, the box model, and conflicts/cascade.

Starting point

To begin, click the Play button in one of the code panels below to open the provided example in the MDN Playground. You'll then follow the instructions in the Project brief section to style the page appropriately.

htmlCopyPlay

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Sizing a blog page challenge</title>
    <link href="style.css" rel="stylesheet" />
  </head>
  <body>
    <header>
      <h1>A most excellent blog</h1>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section id="introduction" class="highlight">
        <h2>Our newest post</h2>
        <p>
          Laoreet lorem curae lectus blandit conubia vel semper laoreet congue
          at taciti.
          <a href="#">Phasellus hac consectetur iaculis dui</a> sapien iaculis
          hac ultricies per luctus. Suscipit mattis lacus semper in porta
          phasellus sollicitudin ipsum fermentum phasellus sapien. Inceptos
          etiam placerat porttitor finibus auctor at platea hendrerit aenean
          laoreet elit lorem odio.
        </p>
      </section>
      <section>
        <h2>Exciting content</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin
          tortor purus <a href="#">platea sit eu id</a> nisi litora libero.
          Neque vulputate consequat ac amet augue blandit maximus aliquet
          congue. Pharetra vestibulum posuere ornare
          <a href="#">faucibus fusce dictumst</a> orci aenean eu facilisis ut
          volutpat commodo senectus purus himenaeos fames primis convallis nisi.
        </p>
        <ul>
          <li>Lorem ipsum dolor</li>
          <li>Neque vulputate consequat</li>
          <li>Phasellus fermentum malesuada</li>
          <li>Curabitur semper venenatis</li>
          <li>Duis lectus porta mattis</li>
        </ul>
        <p>
          Phasellus fermentum malesuada phasellus netus dictum aenean placerat
          egestas amet.
          <a href="#">Ornare taciti semper dolor tristique</a> morbi. Sem leo
          tincidunt aliquet semper eu lectus scelerisque quis. Sagittis vivamus
          mollis nisi mollis enim fermentum laoreet.
        </p>
        <h2>More exciting content</h2>
        <p>
          Curabitur semper venenatis lectus viverra ex dictumst nulla maximus.
          Primis iaculis elementum conubia feugiat venenatis dolor augue ac
          blandit nullam ac <a href="#">phasellus turpis</a> feugiat mollis.
          Duis lectus porta mattis imperdiet vivamus augue litora lectus arcu.
          Justo torquent pharetra volutpat ad blandit bibendum
          <a href="#">accumsan nec elit cras</a> luctus primis ipsum gravida
          class congue.
        </p>
        <p>
          Vehicula etiam elementum finibus enim duis feugiat commodo adipiscing
          tortor <a href="#">tempor elit</a>. Et mollis consectetur habitant
          turpis tortor consectetur adipiscing vulputate dolor lectus iaculis
          convallis adipiscing. Nam hendrerit
          <a href="#">dignissim condimentum ullamcorper diam</a> morbi eget
          consectetur odio in sagittis.
        </p>
      </section>
      <section id="summary" class="highlight">
        <h2>Summary</h2>
        <p>
          Et arcu tortor lorem ac primis ac suspendisse lectus nulla. Habitant
          fermentum <a href="#">leo facilisis lobortis</a> risus lobortis
          maximus gravida. Euismod fames maecenas imperdiet senectus
          <a href="#">nec nisi amet pellentesque felis</a> vitae vestibulum
          integer nec tellus. Eros posuere lacinia et tellus quis fames mattis
          quisque mauris placerat rhoncus pretium sed consectetur
          <a href="#">convallis</a>.
        </p>
      </section>
    </main>
    <footer class="highlight">
      <p>©️ 2025 Nobody</p>
    </footer>
  </body>
</html>

cssCopyPlay

/* Basic type and text */

body {
  font: 1.2em / 1.5 system-ui;
  width: clamp(480px, 70%, 1000px);
  margin: 0 auto;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

a {
  color: red;
}

a:hover {
  text-decoration: none;
}

/* Nav menu */

ul {
  display: flex;
  padding: 0;
  list-style-type: none;
  justify-content: space-between;
  gap: 10px;
}

li {
  flex: 1;
}

a {
  text-decoration: none;
  color: black;
  background-color: yellowgreen;
  text-align: center;
  padding: 10px;
}

a:hover {
  background-color: goldenrod;
}

/* Intro and summary */

.highlight {
  margin-top: 0;
  background-color: darkslategray;
  color: cornsilk;
}

.highlight a {
  color: purple;
}

/* Footer */

footer {
  margin-top: 20px;
  background-color: goldenrod;
  text-shadow: 1px 1px 1px black;
}

Play

Project brief

The basic blog example you've been given isn't finished, and the existing code has some problems. Follow the steps below to complete the project.

We want every element on this page to use the alternative box model. Add a rule to the stylesheet that does this.
There is a problem with the rules for the nav menu — the styles are mostly OK, but they are affecting the other unordered list and content links, making them look bad! Can you adjust the selectors for these rules so that they only target the nav menu?
Actually, there is another problem with the nav menu — the <a> elements are not spanning the full width of their <li> element parents like they are meant to. Can you adjust the way they are displaying so that they span the full width?
For both the nav menu links and the regular content links, we are setting a different style on hover so that mouse users can see which link they are hovering over. This presents an accessibility issue for keyboard users, who won't be able to see those styles. Can you alter the selectors in the relevant rules so that these styles are also applied when a keyboard user tabs to the links?
We want the introduction, summary, and footer to have 20px of padding on all sides. Make this happen by adding a single declaration somewhere in the stylesheet.
Add a rule that selects the first line of every paragraph that appears right after a second-level heading, and turns it bold.
As a follow-on from the previous question, can you think of a way to bold the first line in every paragraph following a second-level heading, but only when the parent element is not the introduction, summary, or footer? You can do this in a few different ways, some more concise than others.
Further down, you'll see that we are using .highlight a to select the <a> elements inside the introduction and summary, and coloring them purple inside the associated rule. But this is no good — the color contrast is terrible. Assuming you are not allowed to change or remove that rule, can you add another rule above it in the source order that colors the <a> elements yellow? Being above it in the source order, it will have to have a higher specificity.
You'll see that we are trying to select the <footer> at the bottom of the stylesheet and give it a text shadow, some margin to move it away from the summary, and a different background color to make it stand out. However, it is not getting the desired margin and background color styles because the .highlight rule has a higher specificity, so its declarations win. Can you alter the selector to make sure those styles get applied?

Hints and tips

Use the W3C CSS Validator to catch unintended mistakes in your CSS — mistakes you might have otherwise missed — so that you can fix them.
You don't need to alter the HTML in any way.

Example

The finished project should look like this:

Play

Click here to show the solution

The finished CSS looks like so:

Help improve MDN

Was this page helpful to you?

YesNo

Learn how to contribute

This page was last modified on Oct 16, 2025 by MDN contributors.

View this page on GitHub • Report a problem with this content

Filter sidebar

Your blueprint for a better internet.

MDN

Contribute

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under a Creative Commons license.